<template>
  <!-- logicFlow框架 -->
  <div class="logic-flow">

    <!-- 右侧边栏  -->
    <a-drawer
      title="添加节点配置信息"
      :width='400'
      placement="right"
      :closable="false"
      :visible="visible"
      @close="onClose"
    >
      <a-form-model :model="nodeForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item label="名称：">
          <a-input v-model="nodeForm.text" style="width: 280px"/>
        </a-form-model-item>
      </a-form-model>
    </a-drawer>

    <!-- 左侧工具栏 -->
    <div class="node-panel">
      <div class="node-item" v-for="item in nodeList" :key="item.text" @mousedown="handleDragNode(item)">
        <div class="node-item-icon" :class="item.class">
          <span class="node-label">{{item.text}}</span>
        </div>
      </div>
    </div>

    <!-- 工具按钮 -->
    <a-radio-group class="btnRadio">
      <a-radio-button @click="handleBtn('large')">放大</a-radio-button>
      <a-radio-button @click="handleBtn('small')">缩小</a-radio-button>
      <a-radio-button @click="handleBtn('reset')">大小适应</a-radio-button>
      <a-radio-button @click="handleBtn('resetTranslate')">定位还原</a-radio-button>
      <a-radio-button :disabled="!undoState" @click="handleBtn('undo')">上一步(ctrl+z)</a-radio-button>
      <a-radio-button :disabled="!redoState" @click="handleBtn('redo')">下一步(ctrl+y)</a-radio-button>
      <a-radio-button @click="handleBtn('img')">保存为图片</a-radio-button>
      <a-radio-button @click="handleBtn('data')">保存为数据</a-radio-button>
    </a-radio-group>
                            
    <!-- 画布盒子 -->
    <div id="container"></div>
  </div>
</template>

<script>
  import LogicFlow from '@logicflow/core'
  import { Menu, Snapshot } from '@logicflow/extension'
  import '@logicflow/core/dist/style/index.css'
  import '@logicflow/extension/lib/style/index.css'

  import { NODE_LIST, config } from '../utils/logicConfig' // 引入左侧工具栏
  import { registerFamen, registerJiedian } from '../registerNode/index' // 自定义节点样式
  export default {
    data() {
      return {
        lf: null,
        nodeList: NODE_LIST,
        visible: false,
        undoState: false,
        redoState: false,
        clickNode: null,
        nodeForm: {
          text: ''
        }
      }
    },
    mounted () {
      this.createCanvas();
    },
    methods: {
      // 创建logicFlow实例
      createCanvas() {
        // 这两个不知道干嘛的，别人用，我也就用了哈 -> 原来是拓展包，本项目用不到
        LogicFlow.use(Menu)
        LogicFlow.use(Snapshot)
        this.lf = new LogicFlow({...config, container: document.querySelector('#container'), keyboard: { enabled: true } });

        // 设置折线样式
        this.lf.setTheme(
          {
            polyline: {
              stroke: '#FF1493',
              strokeWidth: 1,
              strokeDashArray: '1,0',
              hoverStroke: '#FF1493',
              selectedStroke: '#FF1493',
              selectedShadow: true,
              offset: 30,
              outlineColor: '#000',
              outlineStrokeDashArray: '3,3',
            },
          }
        )

        this.registerNode();
      },

      // 自定义工具栏
      registerNode() {
        registerFamen(this.lf);
        registerJiedian(this.lf);
        this.handleRender()
      },

      // 渲染logiFlow实例
      handleRender() {
        this.lf.render();
        this.LfEvent();
      },

      // 绘制区域节点事件
      LfEvent() {
        // 节点点击打开右侧属性配置栏
        this.lf.on('node:click', ({data}) => {
          console.log('node:click<<<<<<<<<<<<<<<', data);
          // 储存选择的节点dom
          this.clickNode  = data;
          this.nodeForm   = { text: '' }
          this.visible    = true;
        })

        // 上一步、下一步按钮状态
        this.lf.on('history:change', ({ data: { undoAble, redoAble } }) => {
          this.undoState = undoAble;
          this.redoState = redoAble;
        })
      },

      // 工具栏拖拽
      handleDragNode(item) {
        this.lf.dnd.startDrag({
          type: item.type,
          properties: {
            name: item.class
          }
        })
      },

      // 右侧边栏关闭
      onClose() {
        this.visible = false;
        let obj = Object.assign(this.clickNode.properties, this.nodeForm)
        // 修改节点名字
        if(this.nodeForm.text) this.lf.updateText(this.clickNode.id, this.nodeForm.text);
        // 保存节点自定义属性
        this.lf.setProperties(this.clickNode.id, obj)
      },

      // 控制按钮
      handleBtn(btn) {
        switch (btn) {
          case 'large': {
            this.lf.zoom(true)
            break
          }
          case 'small': {
            this.lf.zoom(false)
            break
          }
          case 'reset': {
            this.lf.resetZoom()
            break
          }
          case 'resetTranslate': {
            this.lf.resetTranslate()
            break
          }
          case 'undo': {
            this.lf.undo()
            break
          }
          case 'redo': {
            this.lf.redo()
            break
          }
          case 'img': {
            this.lf.getSnapshot()
            break
          }
          case 'data': {
            let data = this.lf.getGraphData()
            console.log('data>>>>>>>>>>>>>>>>>>', data);
            break
          }
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .logic-flow {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    // 工具栏样式配置
    .node-panel {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 70px;
      padding: 20px 10px 0;
      background-color: white;
      box-shadow: 0 0 10px 1px rgb(228, 224, 219);
      border-radius: 6px;
      text-align: center;
      z-index: 101;
      .node-item {
        margin-bottom: 35px;
      }
      .node-item-icon {
        width: 30px;
        height: 30px;
        margin-left: 10px;
        background-size: cover;
      }
      .node-label {
        position: absolute;
        font-size: 12px;
        margin-left: -12px;
        margin-top: 30px;
        user-select: none;
      }
      .node-jiedian{
        background: url('../background/jiedian.svg') no-repeat;
        background-size: cover;
      }
      .node-rect{
        border: 1px solid #228B22;
        border-radius: 5px;
      }
      .node-famen{
        background: url('../background/famen.svg') no-repeat;
        background-size: cover;
      }
    }
    
    // 工具按钮 
    .btnRadio {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      z-index: 200;
    }

    #container {
      width: 100%;
      height: 100%;
    }
  }
</style>